<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构
				案例：1.input文本输入框
					 2.textarea 文本域
					 3.select 下拉框
					 4.radio 单选框
					 5.checkbox 复选框-->
			<form action="v-pre">
				<h1>表单数据提交</h1>
				姓名:<input v-model="user.username"/><br>
				详情:<textarea v-model="user.info"></textarea><br>
				城市:<select name="city" v-model="user.city" multiple="true">
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="成都">成都</option>
					<option value="贵阳">贵阳</option>
					</select><br>
				性别:<input type="radio" value="男" name="gmeder" v-model="user.gmeder"/>男
					<input type="radio" value="女" name="gmeder" v-model="user.gmeder"/>女
			
			</form>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app =new Vue({
				el: "#app",
				data: {
					user: {
						username: '',
						info: '添加用户详情信息',
						//如果数据是单值采用字符串，如果数据是多值采用数组
						city: [贵阳],
						gender: '女'
					}
				}
			})
			</script>
	</body>
</html>
